<template>
<div>
  <v-row justify="center">
    <v-col cols="8">
      <v-data-table
        :headers="headers"
        :items="tables"
        sort-by="calories"
        class="elevation-1 mt-8"
      >
        <template v-slot:item.name="props">
          <a @click="jump(props.item.name)">{{ props.item.name }}</a>
        </template>

        <template v-slot:top>
          <v-toolbar flat color="blue lighten-3">
            <v-toolbar-title>Data Tables</v-toolbar-title>
            <v-divider
              class="mx-4"
              inset
              vertical
            ></v-divider>
            <v-spacer></v-spacer>
            <v-dialog v-model="dialog" max-width="500px">
              <template v-slot:activator="{ on }">
                <v-btn outlined v-on="on">New Item</v-btn>
                <!-- <v-btn outlined @click="testGet">testGet</v-btn>
                <v-btn outlined @click="testPost">testPost</v-btn> -->
              </template>
              <v-card>
                <v-card-title>
                  <span class="headline">{{ formTitle }}</span>
                </v-card-title>

                <v-card-text>
                  <v-container>
                    <v-row>
                      <v-text-field v-model="editedItem.tableName" label="Table Name"></v-text-field>
                    </v-row>
                    <v-row>
                      <v-textarea
                        outlined
                        label="Table Info"
                        hint='Please enter column information, each column is separated by commas, such as "id integer unique, content string"'
                        placeholder='id integer unique, content string'
                        v-model="editedItem.text"
                      ></v-textarea>
                    </v-row>
                  </v-container>
                </v-card-text>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
                  <v-btn color="blue darken-1" text @click="save">Save</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-toolbar>
        </template>
        <template v-slot:item.actions="{ item }">
          <!-- <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
          >
            mdi-pencil
          </v-icon> -->
          <v-icon
            small
            @click="deleteItem(item)"
          >
            mdi-delete
          </v-icon>
        </template>
        <template v-slot:no-data>
          <v-btn color="primary" @click="initialize">Reset</v-btn>
        </template>
      </v-data-table>
    </v-col>
  </v-row>
</div>
</template>

<script>
  export default {
    name: 'dataTable',
    data: () => ({
      dialog: false,
      headers: [
        { text: 'Tables', value: 'name', width: 800},
        { text: 'Actions', value: 'actions', sortable: false },

      ],
      tables: [],
      editedIndex: -1,
      editedItem: {
        tableName: "",
        text: ""
      },
      typeItems: ["integer", "string"],
      defaultItem: {
        tableName: "",
        text: ""
      },
    }),

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },

    watch: {
      dialog (val) {
        val || this.close()
      },
    },

    created () {
      this.initialize()
    },

    methods: {
        jump (tbName) {
          console.log(tbName)
          this.$router.push('/table/' + tbName)
        },
        testGet () {
            this.$axios.get("/api/test", {
                 params:{            
                    phone:12345678,   //参数，键值对，key值：value值
                    name: 'hahah'
                }
            }).then(res => {
                console.log(res.data)
            })
        },
        testPost() {
            this.$axios.post("/api/test2", {username: "abc", password: "12345"}).then(res => {
                console.log(res.data)
            })
        },

        initialize () {
          this.$axios.get('/api/get_all_table_name').then(res => {
            console.log(res.data)
            const tmpTables = []
            for (let i = 0; i < res.data.length; i++)
            {
              tmpTables.push({
                name: res.data[i]
              })
            }
            this.tables = tmpTables
          })
        },

      editItem (item) {
        this.editedIndex = this.tables.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        const index = this.tables.indexOf(item)
        if (confirm('Are you sure you want to delete this item?')) {
          // console.log(item)
          this.$axios.post('/api/drop_table', {tableName: this.tables[index].name}).then(res => {
            if (res.data.msg) alert(res.data.msg)
          })
          this.tables.splice(index, 1)
        }
        
      },

      close () {
        this.dialog = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      save () {
        // if (this.editedIndex > -1) {
        //   Object.assign(this.tables[this.editedIndex], this.editedItem)
        // } else {
        let newTableName = this.editedItem.tableName
        this.$axios.post('/api/create_table', this.editedItem).then(res => {
          console.log(res.data)
          // alert(res.data)
          if (res.data.msg) alert(res.data.msg)
          else {
            this.tables.push({
              name: newTableName
            })
          }   
        }) 
        // }
        this.close()
      },
    },
  }
</script>